<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <!-- <chart-card :loading="loading" title="xxx量" total="126,560">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip> 
          <template slot="footer">xxxx<span>xxxxx</span></template>
        </chart-card> -->

        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <a-row>
            <a-col :span="16">
              <div class="total">{{ ct.slot_count }}</div>
              <div class="subtitle">电解槽数量</div>
            </a-col>
            <a-col :span="8"> <img src="~@/assets/analysis/djc.png" width="65px" /> </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <a-row>
            <a-col :span="16"
              ><div class="total">{{ ct.formula_count }}</div>
              <div class="subtitle">算法库</div></a-col
            >
            <a-col :span="8"> <img src="~@/assets/analysis/sfk.png" width="65px" /> </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <a-row>
            <a-col :span="16"
              ><div class="total">{{ ct.report_count }}</div>
              <div class="subtitle">报告库</div>
            </a-col>
            <a-col :span="8"> <img src="~@/assets/analysis/bg.png" width="65px" /> </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
          <a-row>
            <a-col :span="16">
              <div class="total">{{ ct.data_count }}</div>
              <div class="subtitle">数据总量(万)</div>
            </a-col>
            <a-col :span="8"> <img src="~@/assets/analysis/sjzl.png" width="65px" /> </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }" v-if="false">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{ width: '256px' }" />
          </div>
          <a-tab-pane loading="true" tab="销售额" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额排行" :dataSource="barData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="销售趋势" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额趋势" :dataSource="barData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-row>
      <a-col :span="10">
        <!-- <a-card :loading="loading" :bordered="false" title="历史数据查询">
          <a-row>
            <a-col :span="24">
              <a-form layout="inline">
                <a-form-item label="属性">
                  <j-dict-select-tag style="width:130px;"
                    type="list"
                    v-model="queryParam.propNo"
                    dictCode="data_property where prop_type = '实时',prop_name,prop_no"
                    placeholder="请选择属性名称"
                  />
                </a-form-item>
                <a-form-item label="日期">
                  <j-date placeholder="开始日期" class="query-group-cust" v-model="queryParam.startDate"></j-date>
                  <span class="query-group-split-cust"></span>
                  <j-date placeholder="结束日期" class="query-group-cust" v-model="queryParam.endDate"> </j-date>
                </a-form-item>
                <a-form-item label="槽号" style="min-width: 400px">
                  <j-select-data-slot
                    placeholder="请选择槽号"
                    :multi="true"
                    :buttons="false"
                    v-model="queryParam.dataSoltIds"
                  ></j-select-data-slot>
                </a-form-item>
              </a-form>
            </a-col>
          </a-row> 
          <line-chart-multid :fields="visitFields" :dataSource="lineData" :height="307"></line-chart-multid>
        </a-card> -->
          <hjtx/>
      </a-col>
      <a-col :span="14">
          <report-cron-job-data-modal ref="reportCronJobDataModal"/>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { getAction } from '@/api/manage'
import JSelectDataSlot from '@/components/jeecgbiz/JSelectDataSlot2'
import ReportCronJobDataModal from '@/views/corp/reportCronJob/ReportCronJobDataList'
import Hjtx from './Hjtx'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100,
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200,
  })
}
export default {
  name: 'IndexHome',
  components: {
    JSelectDataSlot,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    ReportCronJobDataModal,
    Hjtx,
  },
  data() {
    return {
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ['2001', '2002'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      ct: {
        data_count: 0,
        formula_count: 0,
        report_count: 0,
        slot_count: 0,
      },
      queryParam: {
        dataSoltIds: [2001, 2002], //槽号
        propNo: 'volt_work', //属性
        startDate: '',
        endDate: '',
      },
      dataList: [],
      lineData:[],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
    }
  },
  created() {
    // setTimeout(() => {
    //   this.loading = !this.loading
    // }, 1000)
    this.initLogInfo()
    this.dataStat()
    this.localHistoryData()
  },
  methods: {
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach((key) => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then((res) => {
        if (res.success) {
          this.visitInfo = res.result
        }
      })
    },
    dataStat() {
      var that = this
      this.loading = true
      getAction('/home/home/dataStat', {})
        .then((res) => {
          if (res.success) { 
            that.ct = Object.assign({}, res.result)
            that.ct.data_count = Math.floor(res.result.data_count/10000);
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    localHistoryData() {
      var that =this;
      this.dataList = {
        2001: [
          { volt_work: 3.99495792388916, record_date: '2023-01-01' },
          { volt_work: 4.010849952697754, record_date: '2023-01-02' },
          { volt_work: 3.996483087539673, record_date: '2023-01-03' },
          { volt_work: 4.002405166625977, record_date: '2023-01-04' },
          { volt_work: 4.007933139801025, record_date: '2023-01-05' },
          { volt_work: 3.990762948989868, record_date: '2023-01-06' },
          { volt_work: 3.9844210147857666, record_date: '2023-01-07' },
          { volt_work: 4.016125202178955, record_date: '2023-01-08' },
          { volt_work: 3.9925060272216797, record_date: '2023-01-09' },
          { volt_work: 3.9966320991516113, record_date: '2023-01-10' },
          { volt_work: 3.9953250885009766, record_date: '2023-01-11' },
          { volt_work: 3.9968221187591553, record_date: '2023-01-12' },
          { volt_work: 4.008749008178711, record_date: '2023-01-13' },
          { volt_work: 3.9884440898895264, record_date: '2023-01-14' },
          { volt_work: 3.9922170639038086, record_date: '2023-01-15' },
        ],
        2002: [
          { volt_work: 4.012852191925049, record_date: '2023-01-01' },
          { volt_work: 4.013423919677734, record_date: '2023-01-02' },
          { volt_work: 4.0763139724731445, record_date: '2023-01-03' },
          { volt_work: 4.002902030944824, record_date: '2023-01-04' },
          { volt_work: 4.0120649337768555, record_date: '2023-01-05' },
          { volt_work: 4.049656867980957, record_date: '2023-01-06' },
          { volt_work: 4.001752853393555, record_date: '2023-01-07' },
          { volt_work: 4.021877765655518, record_date: '2023-01-08' },
          { volt_work: 4.027303218841553, record_date: '2023-01-09' },
          { volt_work: 4.002285003662109, record_date: '2023-01-10' },
          { volt_work: 4.027328014373779, record_date: '2023-01-11' },
          { volt_work: 4.008534908294678, record_date: '2023-01-12' },
          { volt_work: 4.01340913772583, record_date: '2023-01-13' },
          { volt_work: 4.007040023803711, record_date: '2023-01-14' },
          { volt_work: 4.013329982757568, record_date: '2023-01-15' },
        ],
      }
         var list = []
      this.dataList[that.queryParam.dataSoltIds[0]].forEach((e) => {
        list.push({ x: e.date, y: e.electric })
        var obj = {
          tian: e.record_date,
          type: e.record_date,
        }
        for (let i = 0; i < that.queryParam.dataSoltIds.length; i++) {
          const key = that.queryParam.dataSoltIds[i]
          obj[key] = that.getValue(key, e.date)
        }
        that.lineData.push(obj)
      }) 
    },
    getValue(soltId, date) {
      var that = this
      return that.dataList[soltId].find((item) => item.date == date)[that.queryParam.propNo]
    },
  },
}
</script>

<style lang="less" scoped>
.total {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  color: #000;
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 36px;
  line-height: 40px;
  height: 40px;
  text-indent: 10px;
}
.subtitle {
  margin: 10px 10px;
}

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>